---
title: Accessibility
redirect_from:
  - /components/servicelogo/accessibility/
---

## Accessibility

The ServiceLogo component has been designed with accessibility in mind, providing flexible display options for service and payment provider logos that can be either decorative or semantic depending on context.

### Accessibility Props

The following prop is available to improve the accessibility of your ServiceLogo component:

| Name | Type     | Description                                                                                                          |
| :--- | :------- | :------------------------------------------------------------------------------------------------------------------- |
| alt  | `string` | Specifies the alternative text for the image to provide context about the service logo component for screen readers. |

### Automatic Accessibility Features

- The component automatically manages ARIA attributes:
  - When `alt` is **not** provided, default role of `"presentation"` is set. This makes the logo decorative and hidden from screen readers.
  - When `alt` is provided, the role is set to `"img"` and the logo becomes accessible to assistive technologies.
- Grayscale mode applies visual styling without affecting accessibility (except for the color contrast)

### Best Practices

- If descriptive text should be provided, fill in the `alt` prop. Role of the ServiceLogo component is automatically set to `"img"`, otherwise it is set to `"presentation"` by default.
- For payment logos, include the payment method name in the alt text (e.g., "Visa", "PayPal", "American Express").
- For service logos, include the service name and context if relevant (e.g., "Kiwi.com guarantee", "AirHelp assistance").
- The `alt` text should always be translated to the user’s language.
- Avoid redundant `alt` text when the logo appears next to visible text containing the same information.
- Ensure sufficient color contrast when using `grayScale` mode, especially against non-white backgrounds.

### Examples

#### Decorative logo alongside text

```jsx
<Stack>
  <ServiceLogo name="Visa" />
  <Text>Pay with Visa</Text>
</Stack>
```

Screen reader announces: "Pay with Visa".

#### Semantic logo with descriptive text

```jsx
<ServiceLogo name="PayPal" role="img" alt="PayPal payment method" />
```

Screen reader announces: "PayPal payment method, image".

#### Multiple payment methods (decorative)

```jsx
<Stack>
  <ServiceLogo name="Visa" />
  <ServiceLogo name="MasterCard" />
  <ServiceLogo name="Amex" />
  <Text>Visa, MasterCard, and American Express accepted</Text>
</Stack>
```

Screen reader announces: "Visa, MasterCard, and American Express accepted".
